{% extends 'base.html' %}

{% block style %}
    {{ super() }}
    <link rel="stylesheet" href="{{ url_for("static",filename="/css/login_style.css") }}">
    <link rel="stylesheet" href="{{ url_for("static",filename="/css/login_font.css") }}">
{% endblock %}

{%block title%}
    欢迎登陆
{%endblock%}

{% block body %}
    {% with messages = get_flashed_messages(with_categories=True) %}
        {% if messages %}
            {% for category,message in messages %}
                <div class="alert alert-{{ category }}">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ message }}
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}
    <div class="materialContainer">
        <form action="{{ url_for('auth.login') }}" method="post" class="box">
            <div class="title">登录</div>
            <div class="input">
                {#                    <label for="name">邮箱</label>#}
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                {{ login_form.email.label }}
                {{ login_form.email(type="email",required = "required",pattern="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+\.(?:.[a-zA-Z0-9_-]+)+$") }}
                {#                    <input type="text" name="name" id="name">#}
                <span class="spin"></span>
            </div>
            <div class="input">
                {{ login_form.password.label }}
                {{ login_form.password }}
                {#                    <label for="pass">密码</label>#}
                {#                    <input type="password" name="pass" id="pass">#}
                <span class="spin"></span>
            </div>
            <div class="button login">
                <button type="submit">
                    <span>登录</span>
                    <i class="fa fa-check"></i>
                </button>
            </div>
            <a href="{{ url_for('auth.forget_passwd') }}" class="pass-forgot">忘记密码？</a>
        </form>
        <form action="{{ url_for('auth.login') }}" method="post" class="overbox" style="height: 590px;">
            <div class="material-button alt-2">
                <span class="shape"></span>
            </div>
            <div class="title">注册</div>
            <div class="input">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                {{ regist_form.reg_email.label }}
                {{ regist_form.reg_email(type="email",required = "required",pattern="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+\.(?:.[a-zA-Z0-9_-]+)+$") }}
                <span class="spin"></span>
            </div>
            <div class="input">
                {{ regist_form.reg_password.label }}
                {{ regist_form.reg_password(required = "required") }}
                <span class="spin"></span>
            </div>
            <div class="input">
                {{ regist_form.password_confirm.label }}
                {{ regist_form.password_confirm(required = "required") }}
                <span class="spin"></span>
            </div>
            <div class="input">
                {{ regist_form.captcha.label }}
                {{ regist_form.captcha(style="position:register",required = "required") }}
                <button id="sent_captcha" type="button">发送验证码</button>
                <span class="spin"></span>
            </div>
            <div class="button">
                <button>
                    <span id="commit_reg">注册</span>
                </button>
            </div>
        </form>

    </div>
{% endblock %}

{% block jumbotron_box %}

{% endblock %}

{% block scripts %}
    <script src="{{ url_for("static",filename="/js/login_index.js") }}"></script>
    <script type="text/javascript">
        //发验证码
        var time = 60;
        $('#sent_captcha').click(function () {
            $('#captcha').unbind('blur');
            $('#captcha').val('');
            $('#captcha').unbind('focus');
            if (time == 60) {
                var time1 = setInterval(function () {
                    if (time == 0) {
                        $("#sent_captcha").html("重新发送");
                        $("#sent_captcha").removeAttr("disabled");
                        time = 60;
                        clearInterval(time1);
                    } else {
                        $("#sent_captcha").attr("disabled", "true");
                        $("#sent_captcha").html("重新发送(" + time + ")");
                        time--;
                    }
                }, 1000);
            }
            {# 判断是否符合email#}
            var reg_email = $('#reg_email').val()
            var bools = reg_email.search('^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+\.(?:.[a-zA-Z0-9_-]+)+$');
            var reg_password = $('#reg_password').val()
            var password_confirm = $('#password_confirm').val()

            if (bools !== -1) {
                if (reg_password === password_confirm) {
                    var data = {
                        "reg_email": reg_email,
                        "csrfmiddlewaretoken":'{{ csrf_token }}'
                    }
                    $.ajax({
                        type: "POST",
                        url: "{{ url_for('auth.sentcaptcha') }}",
                        data: JSON.stringify(data),
                        headers:{
                            'Content-Type': 'application/json;charset=utf-8',
                            "X-CSRFToken": "{{csrf_token}}"
                        },
                        success: function (result) {
                            alert("发送成功");
                        },
                        error: function (result) {
                            console.log(result)
                            alert("发送失败");
                        }
                    })
                } else {
                    alert('密码不一致');
                }
            } else {
                alert("邮箱格式错误");
            }
        })

        $('#commit_reg').click(function () {
            var reg_password = $('#reg_password').val()
            var password_confirm = $('#password_confirm').val()
            if (reg_password !== password_confirm) {
                alert('密码不一致');
            }
        })
    </script>
{% endblock %}